<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff; /* 浅蓝色背景 */
            margin: 0;
            padding: 20px;
        }

        #container {
            display: flex;
            justify-content: space-between;
            max-width: 900px;
            margin: auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .section {
            width: 48%;
            background-color: #ffe4e1; /* 粉色背景 */
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        h3 {
            color: #ff69b4; /* 粉色标题 */
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-top: 10px;
            color: #333;
        }

        input[type="date"],
        input[type="number"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ff69b4; /* 粉色边框 */
            border-radius: 5px;
        }

        button {
            padding: 10px 15px;
            background-color: #add8e6; /* 浅蓝色按钮 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #87ceeb; /* 浅蓝色按钮悬停效果 */
        }

        #result,
        #futureResult {
            margin-top: 20px;
            font-size: 18px;
            color: chocolate;
            background-color: #ffe4e1; /* 粉色背景 */
            padding: 10px;
            border-radius: 5px;
        }
    </style>
    <script>
        function calculateDateDifference() {
            const startDate = new Date(document.getElementById("startDate").value);
            const endDate = new Date(document.getElementById("endDate").value);

            const timeDiff = endDate - startDate;
            const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

            const years = Math.floor(daysDiff / 365);
            const months = Math.floor((daysDiff % 365) / 30);
            const days = (daysDiff % 365) % 30;

            document.getElementById("result").innerText =
                `时间差：${years}年 ${months}月 ${days}天`;
        }

        function calculateFutureDate() {
            const dateInput = new Date(document.getElementById("baseDate").value);
            const daysToAdd = parseInt(document.getElementById("days").value);

            const futureDate = new Date(dateInput);
            futureDate.setDate(dateInput.getDate() + daysToAdd);

            document.getElementById("futureResult").innerText =
                `未来日期：${futureDate.toLocaleDateString()}`;
        }
    </script>
</head>

<body>
    <div id="container">
        <div class="section" id="calculateDiffSection">
            <h3>计算时间差</h3>
            <label for="startDate">开始日期：</label>
            <input type="date" id="startDate">
            <label for="endDate">结束日期：</label>
            <input type="date" id="endDate">
            <button onclick="calculateDateDifference()">计算时间差</button>
            <div id="result"></div>
        </div>

        <div class="section" id="calculateFutureSection">
            <h3>计算未来日期</h3>
            <label for="baseDate">基准日期：</label>
            <input type="date" id="baseDate">
            <label for="days">增加天数：</label>
            <input type="number" id="days" placeholder="请输入天数">
            <button onclick="calculateFutureDate()">计算未来日期</button>
            <div id="futureResult"></div>
        </div>
    </div>
</body>

</html>
